<template>
  <div class="stationStateMap-container">
    <div class="stationStateMap">
      <info-window
        :map="map"
        :markers="markers"
        @on-change="changeMarker">
        <el-descriptions title="站点状态信息" size="medium" :column="2" border>
          <el-descriptions-item label="区站号（字符）" label-align="left">
            {{theMarker.stationIdC}}
          </el-descriptions-item>
          <el-descriptions-item label="接收时间" label-align="left">
            {{theMarker.receiveTime}}
          </el-descriptions-item>
          <el-descriptions-item label="是否最新" label-align="left">
            {{theMarker.isNew === '1' ? '是' : '不是'}}
          </el-descriptions-item>
          <el-descriptions-item label="经度" label-align="left">
            {{theMarker.lng}}
          </el-descriptions-item>
          <el-descriptions-item label="纬度" label-align="left">
            {{theMarker.lat}}
          </el-descriptions-item>
          <el-descriptions-item label="通信状态" label-align="left">
            {{theMarker.isNormalComWithSubCommunicationState === '0' ? '正常' : '不正常'}}
          </el-descriptions-item>
          <el-descriptions-item label="主板电压" label-align="left">
            {{theMarker.collectorMainboardVoltage + " V"}}
          </el-descriptions-item>
          <el-descriptions-item label="主板温度" label-align="left">
            {{theMarker.collectorMainboardTemperature + " ℃"}}
          </el-descriptions-item>
          <el-descriptions-item label="电池电量" label-align="left">
            {{theMarker.collectorMainboardElectric}}
          </el-descriptions-item>
        </el-descriptions>
      </info-window>
    </div>
    <socket></socket>
  </div>
</template>

<script>
import infoWindow from '@/components/infoWindow/infoWindow.vue';
import { listMap } from "@/api/modules/stationStateList";
import blueMarker from "@/assets/marker/72B5FC.png";
import redMarker from "@/assets/marker/FF9EB2.png";
import Socket from "@/components/Socket/index"

export default {
  name: "stationStateMap",
  components: {
    infoWindow,
    Socket
  },
  mounted() {
    this.initStateMarker();
  },
  data() {
    return {
      // 地图配置
      map: {
        ak: 'udsmk3UY80oXjW6ez70FKjaQK2kWjBNj',
        // 中心点
        center: {
          lng: '106.42',
          lat: '26.35'
        },
        // 缩放等级
        zoom: 12,
        width: '100%',
        height: '100%',
      },
      // 地图标记点
      markers: [],
      // 所有站点状态
      allStationStateList:[],
      // 当前站点
      theMarker:{},
    }
  },
  methods: {
    /** 获取图标Icon */
    getMarkerIcon(isNew){
      let markerIcon = {
        url:blueMarker,
        size:{
          width: 50,
          height: 60,
        }
      }
      if(isNew !== '1'){
        markerIcon.url = redMarker;
      }
      return markerIcon;
    },
    /** 初始化标记点 */
    initStateMarker(){
      // 先置空
      this.markers = [];
      listMap().then(res =>{
        this.allStationStateList = res.data;
        this.allStationStateList.forEach(state =>{
          this.markers.push({
            lng:state.lon,
            lat:state.lat,
            markerIcon:this.getMarkerIcon(state.isNew),
            stationIdC:state.stationIdC,
            receiveTime:state.receiveTime,
            isNormalComWithSubCommunicationState:state.isNormalComWithSubCommunicationState,
            collectorMainboardVoltage:state.collectorMainboardVoltage,
            collectorMainboardTemperature:state.collectorMainboardTemperature,
            collectorMainboardElectric:state.collectorMainboardElectric,
            isNew:state.isNew
          })
        })
      })
    },
    // 切换标记点 marker当前标记点对象
    changeMarker(marker) {
      console.log(marker)
      this.theMarker = marker
    },

  }
}
</script>

<style scoped>
.stationStateMap-container {
  display: flex;
  width: 100%;
  height: 90vh;
}

.stationStateMap {
  width: 100%;
  flex: 1; /*沾满剩下的空间*/
  overflow: hidden
}
</style>
